<template>
  <view class="filter">
    <view class="filter-default">
      <wd-input
        type="text"
        class="actory-name"
        v-model="params.factoryName"
        placeholder="请输入工厂名称搜索"
        @confirm="factoryNameChange"
      />
      <wd-icon
        name="filter"
        :style="{ color: show ? '#0D6EFE' : '' }"
        size="22px"
        @click="toggleShow"
      ></wd-icon>
    </view>
    <wd-overlay :show="show" :lockScroll="true"></wd-overlay>
    <view class="filter-content" v-if="show" catchtouchmove="true">
      <wd-collapse v-model="collapseValue">
        <wd-collapse-item title="订单状态" name="item1">
          <wd-checkbox-group v-model="params.statusList" shape="button">
            <view class="radio-group">
              <view class="order-status" v-for="(item, index) in orderStatus" key="index">
                <wd-checkbox :modelValue="item.value">
                  {{ item.label }}
                </wd-checkbox>
              </view>

              <!-- <view class="close-order-status">
                <wd-icon
                  name="close-circle-filled"
                  size="22px"
                  @click="params.status = ''"
                ></wd-icon>
              </view> -->
            </view>
          </wd-checkbox-group>
        </wd-collapse-item>
        <wd-collapse-item title="原料类型" name="item2">
          <wd-radio-group v-model="params.materialType" shape="button">
            <view class="radio-group">
              <wd-radio class="material-types" v-for="item in materialTypes" :value="item.value">
                {{ item.label }}
              </wd-radio>
              <view class="close-order-status">
                <wd-icon
                  name="close-circle-filled"
                  size="22px"
                  @click="params.status = ''"
                ></wd-icon>
              </view>
            </view>
          </wd-radio-group>
        </wd-collapse-item>
        <wd-collapse-item title="按时间筛选" name="item3">
          <wd-cell-group>
            <wd-cell title="快捷筛选" title-width="60px">
              <wd-radio-group class="date-radio-group" v-model="dateType" shape="button">
                <wd-radio value="A">近一年</wd-radio>
                <wd-radio value="B">近半年</wd-radio>
                <wd-radio value="C">近30天</wd-radio>
              </wd-radio-group>
            </wd-cell>
            <wd-calendar
              type="daterange"
              label="自定义时间段"
              v-model="timeRange"
              placeholder="请选择时间范围"
              @confirm="handleConfirm"
            />
          </wd-cell-group>
        </wd-collapse-item>
      </wd-collapse>
      <view class="footer">
        <wd-button type="default" block @click="onReset" :round="true">重置</wd-button>
        <wd-button type="primary" block @click="onQuery" :round="true">完成</wd-button>
      </view>
    </view>
    <!-- </wd-overlay> -->
  </view>
</template>
    
<script setup lang="ts">
// 组件选项配置
defineOptions({
  name: 'OrderFilter',
  options: {
    styleIsolation: 'shared',
  },
})
import { orderStatus, materialTypes } from '@/common/constants'
import dayjs from 'dayjs'
const dateType = ref<string>('')
const timeRange = ref<number[]>([])
const show = ref<boolean>(false)
const collapseValue = ref<string[]>(['item1', 'item2', 'item3'])
const params = reactive({
  factoryName: '',
  statusList: [],
  materialType: '',
  startCommitTime: '',
  endCommitTime: '',
})

const emit = defineEmits(['filterChange'])

watch(dateType, (newVal) => {
  console.log(newVal)
  if (newVal === 'A') {
    // 近一年
    const endDate = new Date()
    const startDate = new Date()
    startDate.setFullYear(endDate.getFullYear() - 1)
    timeRange.value = [startDate.getTime(), endDate.getTime()]
  } else if (newVal === 'B') {
    // 近半年
    const endDate = new Date()
    const startDate = new Date()
    startDate.setMonth(endDate.getMonth() - 6)
    timeRange.value = [startDate.getTime(), endDate.getTime()]
  } else if (newVal === 'C') {
    // 近30天
    const endDate = new Date()
    const startDate = new Date()
    startDate.setDate(endDate.getDate() - 30)
    timeRange.value = [startDate.getTime(), endDate.getTime()]
  }
})

const toggleShow = () => {
  show.value = !show.value
  // toggleBodyScroll(show.value)
}

// 锁定/解锁滚动的方法
const toggleBodyScroll = (isLock) => {
  const page = document.querySelector('.uni-page-body') || document.body
  if (isLock) {
    if (page) {
      page.style.overflow = 'hidden' // 禁止滚动
      page.style.touchAction = 'none' // 禁止触摸滑动（增强兼容性）
    }
  } else {
    if (page) {
      page.style.overflow = '' // 恢复默认
      page.style.touchAction = ''
    }
  }
}

function onReset() {
  params.factoryName = ''
  params.status = ''
  params.materialType = ''
  params.startCommitTime = ''
  params.endCommitTime = ''
  timeRange.value = []
  dateType.value = ''
}

function onQuery() {
  show.value = false
  emit('filterChange', {
    ...params,
    startCommitTime: timeRange.value[0]
      ? dayjs(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
      : '',
    endCommitTime: timeRange.value[1]
      ? dayjs(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
      : '',
  })
}

function factoryNameChange(val) {
  // params.factoryName = val
  if (!show.value) {
    onReset()
    params.factoryName = val.value
    emit('filterChange', {
      ...params,
      startCommitTime: timeRange.value[0]
        ? dayjs(timeRange.value[0]).format('YYYY-MM-DD HH:mm:ss')
        : '',
      endCommitTime: timeRange.value[1]
        ? dayjs(timeRange.value[1]).format('YYYY-MM-DD HH:mm:ss')
        : '',
    })
  }
}

function handleConfirm({ value }) {
  dateType.value = ''
}
</script>
    
<style scoped lang="scss">
.filter {
  position: relative;
  :deep(.wd-cell__wrapper) {
    padding: 0;
  }
  .filter-default {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 10px;
    justify-content: space-between;
    background: #fff;
    border-bottom: 1px solid #c3c3c3;
    position: relative;
    z-index: 100;
    .actory-name {
      flex: 1;
    }
    :deep(.wd-input) {
      flex: 1;
    }
  }
  .filter-content {
    position: absolute;
    width: 100%;
    background: #ffffff;
    z-index: 100;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    .order-status {
      margin: 2px 0;
    }
    :deep(.wd-checkbox) {
      width: auto;
      padding: 0;
    }
    .radio-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .date-radio-group {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    .footer {
      display: flex;
      padding: 10px;
      .wd-button {
        flex: 1;
      }
    }
    .close-order-status {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>
    